<template>
	<view class="page">
		<view class="card">
			<view class="card-info" v-if="isBindCard">
				<view class="card-info-name">
					<view class="bank-icon">
						<u-image height="100%" :src="cardInfo.bank_logo" mode="heightFix"></u-image>
					</view>
					<text>{{ cardInfo.bank_name || "***" }}</text>
				</view>
				<view class="card-info-number">{{
          bankNumber || "**** **** **** ****"
        }}</view>
			</view>
			<view class="no-card" v-if="!isBindCard && isLoad">
				<u-image width="100%" src="../../static/images/noBankCardImg.png" mode="widthFix"></u-image>
				<text>暂无银行卡</text>
			</view>
			<u-button class="bindcard-btn" :plain="true" shape="square" type="warning" :ripple="true"
				@click="bindBankCard">{{ isBindCard == 0 ? "绑定银行卡" : "换绑银行卡" }}</u-button>

		</view>

		<view class="tips">
			<view class="tips-title">
				<text>温馨提示</text>
				<u-line class="tips-title-line" color="#82848A" />
			</view>
			<view class="tips-content">
				<view>为了您的账户资金安全，仅支持绑定一张银行卡。</view>
				<view>必须绑定与实名认证同一人的银行卡。</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<toast></toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isBindCard: 0,
				cardInfo: {},
				isLoad: false,
			};
		},
		computed: {
			bankNumber() {
				if (this.cardInfo.card_number) {
					return this.cardInfo.card_number_mask_fmt;
				}
			},
		},
		onLoad() {
			this.isBindCard = uni.getStorageSync("loginInfo").isBindCard;
			this.getBankCard();
		},
		methods: {
			getBankCard: function() {
				this.$u.api
					.myBankCard()
					.then((res) => {
						if (res.status == 200) {
							this.cardInfo = res.result;
						}
						this.isLoad = true;
					})
					.catch((res) => {
						if (res.errMsg == "request:fail timeout") {
							this.$u.toast("请求超时，请重试!");
						} else if (res.errMsg == "request:fail") {
							this.$u.toast("请求失败，请重试");
						} else {
							this.$u.toast("请求失败，请重试");
						}
						this.$loading(false);
						setTimeout(() => {
							this.$u.route({
								type: "navigateBack",
								delta: 1,
							});
						}, 2000);
					});
			},
			bindBankCard() {
					this.$u.route({
					url: '/pages/wallet/bindBankCard',
					type: 'redirectTo',
				})
			},

		},
	};
</script>

<style lang="scss">
	.page {
		letter-spacing: 3rpx;

		.card {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 50rpx;
			background-color: white;

			.card-info {
				position: relative;
				padding: 60rpx 0;
				width: 90%;
				height: 300rpx;
				border-radius: 20rpx;
				color: #fff;
				background-image: linear-gradient(to top, #fc6306, #fe913d);

				.card-info-name {
					display: flex;
					align-items: center;
					padding-left: 30rpx;
					font-size: 40rpx;
					font-weight: bold;

					.bank-icon {
						border-radius: 50%;
						height: 70rpx;
						overflow: hidden;
					}

					text {
						padding-left: 15rpx;
					}
				}

				.card-info-number {
					position: absolute;
					top: 50%;
					width: 100%;
					font-family: "din-font";
					font-size: 48rpx;
					text-shadow: 0 0 6rpx #c0c4cc;
					padding: 0 30rpx;
				}

				&::after {
					content: "";
					display: block;
					width: 90%;
					height: 20rpx;
					background: #ffaa76;
					border-radius: 0 0 20rpx 20rpx;
					position: absolute;
					left: 50%;
					bottom: -20rpx;
					transform: translateX(-50%);
				}
			}

			.no-card {
				padding: 30rpx 0;
				text-align: center;
				width: 40%;

				&>text {
					font-size: 26rpx;
					color: #82848a;
				}
			}

			.bindcard-btn {
				margin: 60rpx 0;
				width: 85%;
				font-size: 32rpx;
				font-weight: bold;
				// background-color: #488ff0;
			}
		}

		.tips {
			padding-top: 60rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #82848a;
			font-size: 28rpx;

			.tips-title {
				display: flex;
				justify-content: center;
				position: relative;
				width: 90%;
				font-size: 30rpx;

				text {
					position: relative;
					background-color: #f1f1f1;
					padding: 0 20rpx 0 65rpx;

					&::before {
						position: absolute;
						content: "";
						background: url(../../static/images/tipIcon.png);
						background-size: cover;
						width: 40rpx;
						height: 40rpx;
						left: 20rpx;
					}
				}

				.tips-title-line {
					position: absolute;
					top: 50%;
					z-index: -1;
				}
			}

			.tips-content {
				width: 90%;
				padding-top: 30rpx;

				view {
					padding: 5rpx 0;
					display: flex;
					align-items: center;

					&::before {
						content: "";
						width: 10rpx;
						height: 10rpx;
						border-radius: 50%;
						background-color: #82848a;
						margin: 0 10rpx;
					}
				}
			}
		}
	}
</style>
